<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello vue</title>
</head>
<body>
    <div id="app"> 
        <h2>{{fullName}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        
        const app = new Vue({
            el: '#app',    
            data: {    
                firstName: 'Lebron',
                lastName: 'James'
            },
            computed: {    
                fullName:  {
                    set: function (newValue) {
                        // 计算属性一般是没有set方法的，只读属性，可以删除
                        console.log('====', newValue);
                        const names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];
                    },
                    get: function () {
                        return this.firstName + ' ' + this.lastName
                    }
                },  
                // fullName: function () {
                //     return this.firstName + ' ' + this.lastName
                // } 
            }
        })
    </script>
</body>
</html>